// 定义路由的
import { createRouter, createWebHistory } from "vue-router";

// 导入进度条模块
import NProgress from 'nprogress'

// 导入进度条样式
import "nprogress/nprogress.css";

// 显示螺旋加载提示
NProgress.configure({
    showSpinner: false
});

const routes = [{
    path: '/',
    redirect: '/login'
}, {
    path: '/login',
    name: 'login',
    component: () => import("../pages/Login.vue")
}, {
    path: '/index',
    name: 'index',
    redirect: "/index/welcome",
    component: () => import("../pages/Index.vue"),
    children: [{
        path: 'welcome',
        name: 'welcome',
        component: () => import("../pages/Welcome.vue")
    }, {
        path: '/index/userlist',
        name: 'userlist',
        component: () => import("../pages/user/User.vue")
    }, {
        path: '/index/pay',
        name: 'pay',
        component: () => import("../pages/pay/Pay.vue")
    }]
}];

const router = createRouter({
    history: createWebHistory(),
    routes
});

// 定义前置全局导航守卫
router.beforeEach((to, from, next) => {
    console.log(to);
    console.log(from);
    // 开启进度条
    NProgress.start();
    // next();
    // 如果用户处于未登录不能访问除了登录页，如果处于登录状态，那么所有组件都可以访问
    // 获取token
    const token = sessionStorage.getItem("token");
    if (token) {
        // 表示token不为空,都可以访问
        next();
    } else {
        // 表示token是空的,login组件是可以访问，其他组件不能访问
        if (to.name == 'login') {
            // 是登录组件，直接访问
            next();
        } else {
            // 表示不是登录组件,token是空的，那么需要跳转到登录组件
            next({name: "login"});
        }
    }
});

// 定义导航的后置钩子
router.afterEach((to, from) => {
    console.log(to);
    console.log(from);
    // 关闭进度条
    NProgress.done();
});

export default router;
